<script setup lang="ts" name="StrInsert">

const { proxy } = getCurrentInstance() as ComponentInternalInstance;
import { dealText } from '../index'
const props = defineProps(['content'])
const emits = defineEmits(['back'])
/*========================================>( 模型属性 )<========================================*/
//是否显示此模块
const show = ref<boolean>(false)
//本组件表单
const insertform = ref<{ [key: string]: any }>({
    isEnter: false,
    to: undefined,
    insertType: 1,
    type: 1,
    aim: undefined,
    rowType: 0,
    excludeRow: undefined,
    aimRow: undefined,
    aimIndex: undefined
})
//是否锁定
const lockStatus = ref<boolean>(false)
/*========================================>( 作用域属性 )<========================================*/
//表单校验规则
const _rules: { [key: string]: any } = {
    aim: [
        { required: true, message: '请输入目标文本', trigger: ['blur', 'change'] }
    ],
    to: [
        { required: true, message: '请输入编辑内容', trigger: ['blur', 'change'] }
    ]
}

/*========================================>( dom属性 )<========================================*/
const domInsertform = ref()

/*========================================>( 普通方法 )<========================================*/
//关闭modal
const cancel = () => {
    emits('back', {})
}

//重置表单
const resetForm = () => {
    domInsertform.value?.resetFields()
}

//监听各种操作
const handleSubmit = () => {
    domInsertform.value.validate((vaild: boolean) => {
        if (vaild) {
            //根据行数进行处理
            let replaceValue = undefined
            const toValue = insertform.value.isEnter ? '\n' : insertform.value.to
            if (insertform.value.isEnter) insertform.value.to = undefined
            //判断插入方向
            if (insertform.value.insertType == 1) {
                //自定义方向
                if (insertform.value.type == 1) {
                    //插入到目标字符之前
                    replaceValue = toValue + insertform.value.aim
                } else {
                    //插入到目标字符之后
                    replaceValue = insertform.value.aim + toValue
                }
            } else {
                //行首行尾在方法内处理
                replaceValue = toValue
            }
            const result = dealText(insertform.value, props.content, replaceValue)
            proxy?.$modal.notifySuccess('插入成功')
            emits('back', { result, keep: lockStatus.value })
        }
    })
}

//更改锁定状态
const changeLockStatus = () => {
    lockStatus.value = !lockStatus.value
}

/*========================================>( 钩子 )<========================================*/
show.value = true




</script>
<template>
    <el-dialog title="条件插入文本" v-model="show" width="65%" @close="cancel" append-to-body draggable
        :modal-class="lockStatus ? 'lock' : 'unlock'">
        <el-form ref="domInsertform" :model="insertform" :rules="_rules" label-width="80px">
            <el-row>
                <el-col :span="8" style="max-width:250px;min-width: 130px;">
                    <el-form-item label="插入换行" required>
                        <el-switch v-model="insertform.isEnter" active-color="#13ce66" inactive-color="#ff4949">
                        </el-switch>
                    </el-form-item>
                </el-col>
                <el-col :span="16">
                    <el-form-item v-if="!insertform.isEnter" label="插入内容" required prop="to">
                        <el-input v-model="insertform.to" placeholder="请输入插入内容" clearable></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-form-item label="插入类型" required>
                <el-radio v-model="insertform.insertType" :label="1">自定义</el-radio>
                <el-radio v-model="insertform.insertType" :label="2">行首</el-radio>
                <el-radio v-model="insertform.insertType" :label="3">行尾</el-radio>
            </el-form-item>
            <el-row v-if="insertform.insertType == 1">
                <el-col :span="12" style="max-width:250px;min-width: 200px;">
                    <el-form-item label="插入到" required>
                        <el-select v-model="insertform.type" placeholder="请选择插入方向">
                            <el-option label="目标之前" :value="1"></el-option>
                            <el-option label="目标之后" :value="2"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="目标字符" required prop="aim">
                        <el-input v-model="insertform.aim" placeholder="请输入目标字符" clearable></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <div style="height:5px;"></div>
            <el-divider content-position="left"><i class="el-icon-caret-bottom"></i> 补充条件</el-divider>
            <div style="height:15px;"></div>
            <el-form-item label="包含行数" required>
                <el-radio v-model="insertform.rowType" :label="0">全部</el-radio>
                <el-radio v-model="insertform.rowType" :label="1">奇数行</el-radio>
                <el-radio v-model="insertform.rowType" :label="2">偶数行</el-radio>
            </el-form-item>
            <el-form-item label="排除行数">
                <el-input v-model="insertform.excludeRow" placeholder="请输入排除行数，多行使用 / 隔开" clearable></el-input>
            </el-form-item>
            <el-row v-if="insertform.insertType == 1">
                <el-col :span="12">
                    <el-form-item label="匹配字符">
                        <el-input v-model="insertform.aimRow" placeholder="请输入匹配字符，此行出现此字符才会执行" clearable></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="行内序列">
                        <el-input v-model="insertform.aimIndex" placeholder="请输入行内序列，即每行第几次出现时执行" clearable></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button :icon="lockStatus ? 'Lock' : 'Unlock'" :type="lockStatus ? 'success' : 'info'"
                    @click="changeLockStatus"></el-button>
                <el-button icon="Refresh" @click="resetForm">重置</el-button>
                <el-button icon="Check" type="primary" @click="handleSubmit()">确
                    定</el-button>
            </div>
        </template>
    </el-dialog>
</template>
<style lang="scss">
.el-overlay.lock {
    background-color: rgba(0, 0, 0, 0.1);
}
</style>
<style lang="scss" scoped></style>